<template>
  <view class="content">
    <uni-nav-bar
      title="会员中心"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view
      class="user-card common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc145.png')})`
      }"
    >
      <view class="user-info">
        <view class="avatar">
          <image :src="userinfo.headimg"></image>
        </view>

        <view class="info">
          <view class="name hang1">{{ userinfo.nickname }}</view>

          <view class="lv">VIP{{ userinfo.vip }}</view>
        </view>
      </view>

      <view class="cur-desc">
        当前权益:
        <text>{{ userinfo.notice || '(无)' }}</text>
      </view>

      <view class="progress">
        <cmd-progress
          :percent="userinfo.jin_du || 0"
          :show-info="false"
          stroke-color=" linear-gradient(90deg, #E40D1D 0%, #E4690D 100%)"
          :strokeWidth="10"
        ></cmd-progress>
      </view>

      <view v-if="userinfo.last_vip != 0" class="need-lv">
        还需消费
        <text>{{ userinfo.upgrade_money }}</text>
        可升级至
        <text>V{{ userinfo.last_vip }}</text>
      </view>
    </view>

    <!-- <view
      class="xietiao common_bg"
      :style="{
        'background-image': `url(${$img('/static/img/2_vip_card.png')})`
      }"
    >
      <view class="header_user">
        <view class="jp_headimg">
          <image :src="userinfo.headimg" class="headimg"></image>
        </view>
        <view>{{ userinfo.nickname }}</view>
      </view>

      <view class="vip-icon"></view>
     

      <view class="header_bot">VIP{{ userinfo.vip }}</view>
      <view class="jifen">距离升级还需要消耗{{ userinfo.upgrade_money }}</view>
    </view> -->

    <view class="list-title">
      <view class="line"></view>

      <text>会员权益</text>

      <view class="line"></view>
    </view>

    <view class="allBox">
      <view class="coupon_item" v-for="(item, index) in config" :key="index">
        <view
          class="icon common_bg"
          :style="{
            'background-image': `url(${$img('/static/img2/cc146.png')})`
          }"
        ></view>
        <view class="coupon_r">
          <view class="title">{{ item.title }}</view>
          <view class="rule">获得条件：累计消费{{ item.condition }}</view>
          <view class="desc">权益说明：{{ item.notice || '(无)' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2 + 'mine/vip/',
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      userinfo: {},
      config: {},
      show: 0,
      type: ''
    }
  },
  onLoad(e) {
    this.getData()
  },
  methods: {
    getData() {
      // 模拟接口
      let that = this
      that.req({
        url: 'vip_list',
        Loading: true,
        success(res) {
          that.userinfo = res.data.userinfo
          that.config = res.data.data
        }
      })
    },
    back() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.footer {
  width: 702rpx;
  height: 88rpx;
  background: #ff5029;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 32rpx;
  position: fixed;
  bottom: 57rpx;
  left: 0;
  right: 0;
  margin: auto;
}

.wenben > view:nth-of-type(1) {
  font-size: 32rpx;
  margin-bottom: 10rpx;
}

.wenben {
  font-size: 24rpx;
  color: #999999;
  padding: 30rpx;
  box-sizing: border-box;
}

.coupon_head {
  width: 372rpx;
  height: 71rpx;
  margin: 70rpx auto 0;
  display: block;
}

.allBox {
  width: 750rpx;
  /* box-shadow: 0px 3rpx 0px 0px #C8CBD3; */
  // border-radius: 40rpx 40rpx 0px 0px;
  // border-top: 2rpx solid #C8CBD3;
  // transform: translateY(-4rpx);
  // background-color: #222222;
}

.header_user > view:nth-of-type(2) > view:nth-of-type(2) {
  font-size: 24rpx;
  margin-left: 20rpx;
}

.header_user > view:nth-of-type(2) > view:nth-of-type(1) {
  margin-left: 20rpx;
  font-size: 36rpx;
  text-shadow: 0px 0px 10px rgba(255, 150, 254, 0.7);
}

.header_user {
  display: flex;
  align-items: center;
  margin-left: 37rpx;
  margin-bottom: 80rpx;
}

.xietiao {
  width: 714rpx;
  height: 274rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  margin: 0 auto;
  position: relative;

  .vip-icon {
    position: absolute;
    right: 30rpx;
    top: -10rpx;

    width: 216rpx;
    height: 200rpx;
  }

  .header_bot {
    text-align: center;
    margin-right: 100rpx;
    margin-bottom: -80rpx;

    font-size: 32rpx;
    font-family: zihun147hao-xingyuanhei;
    font-weight: 400;
    color: #ffffff;
  }
}

.jifen {
  position: absolute;
  bottom: 66rpx;
  left: 51rpx;
  font-size: 24rpx;
  color: #fff;
  // opacity: 0.6;
}
.xian {
  position: absolute;
  bottom: 112rpx;
  left: 51rpx;
  width: 600rpx;
  height: 1px;
  background: linear-gradient(94deg, #ffffff, #ffffff, #ffffff);
  opacity: 0.2;
  border-radius: 1rpx;
}
.jp_headimg > image {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.content {
  width: 100vw;
  min-height: 100vh;
  // padding-top: calc(var(--status-bar-height) + 140rpx);
  // padding-bottom: 100rpx;
  box-sizing: border-box;
  color: #fff;
  padding-bottom: 40rpx;
  // .head {
  //   position: fixed;
  //   top: 0;
  //   z-index: 20;
  //   .header_title {
  //     height: 70rpx;
  //     line-height: 70rpx;
  //     width: 100%;
  //     box-sizing: border-box;
  //     font-weight: bold;
  //     display: flex;
  //     align-items: center;
  //     padding-left: 30rpx;
  //     box-sizing: border-box;
  //     > view:nth-of-type(1) {
  //       display: flex;
  //       align-items: center;
  //     }
  //     > view:nth-of-type(2) {
  //       width: 520rpx;
  //       text-align: center;
  //       /* margin: auto; */
  //     }
  //     image {
  //       width: 48rpx;
  //       height: 48rpx;
  //     }
  //   }
  // }

  .user-card {
    width: 690rpx;
    height: 352rpx;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40rpx 40rpx 0;
    position: relative;

    .user-info {
      display: flex;
      align-items: center;

      .avatar {
        width: 132rpx;
        height: 132rpx;
        border: 4rpx solid #000000;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        padding-left: 20rpx;

        .name {
          width: 250rpx;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }

        .lv {
          padding: 6rpx 0 0;

          font-family: 光良酒-干杯体, 光良酒-干杯体;
          font-weight: 400;
          font-size: 24rpx;
          color: #e40d1d;
        }
      }
    }

    .cur-desc {
      margin-top: 20rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;

      text {
        color: #e40d1d;
      }
    }

    .progress {
      margin-top: 20rpx;

      /deep/.cmd-progress-inner {
        background: #333333;
      }
    }

    .need-lv {
      margin-top: 10rpx;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      text {
        color: #e40d1d;
      }
    }
  }

  .list-title {
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .line {
      width: 118rpx;
      height: 2rpx;
      background: #e40d1d;
    }

    text {
      padding: 0 10rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #e40d1d;
    }
  }

  .coupon_item {
    position: relative;
    padding: 24rpx 20rpx;
    box-sizing: border-box;
    margin: 20rpx auto 0;
    width: 690rpx;
    display: flex;
    align-items: center;
    background: #252525;
    border: 2rpx solid #444444;

    .icon {
      width: 110rpx;
      height: 110rpx;
    }

    .coupon_r {
      position: relative;
      padding-left: 60rpx;

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 114rpx;
        background: #666;
      }

      .title {
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 32rpx;
        color: #ffffff;
      }

      .rule,
      .desc {
        margin-top: 10rpx;

        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }
  }
}
</style>
